<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <!--导航栏-->
        <el-aside width="200px">
            <div align="center" style="margin-top: 40px">
                <div class="block"><el-avatar :size="100" :src="circleUrl"></el-avatar></div>
            </div>
            <el-menu style="margin-top:20px"
                     :default-openeds="['1','2','3']"
                     class="el-menu-vertical-demo"
                     @open="handleOpen"
                     @close="handleClose">
                <el-submenu index="1" >
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>门诊挂号系统</span>
                    </template>
                    <el-menu-item index="1-1" @click="registrationShow" >
                        <i class="el-icon-menu"></i>
                        <span slot="title" >挂号管理</span>
                    </el-menu-item>
                    <el-menu-item index="1-2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">查询统计</span>
                    </el-menu-item>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-first-aid-kit"></i>
                        <span>门诊医生工作站</span>
                    </template>
                    <el-menu-item index="2-1">
                        <i class="el-icon-menu"></i>
                        <span slot="title">日常业务</span>
                    </el-menu-item>
                    <el-menu-item index="2-2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">查询统计</span>
                    </el-menu-item>
                </el-submenu>

                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-coin"></i>
                        <span>收费系统</span>
                    </template>
                    <el-menu-item index="3-1">
                        <i class="el-icon-menu"></i>
                        <span slot="title">收费处理</span>
                    </el-menu-item>
                    <el-menu-item index="3-2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">查询统计</span>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <!--顶栏-->
            <el-header>

            </el-header>
            <!--主内容-->
            <el-main style="height: 800px">
                <el-tabs v-show="registrationManagement" :tab-position="tabPosition" style="height: 200px;margin-top: 35px">
                    <el-tab-pane label="窗口挂号" v-for>
                        <div style="width: 500px;margin-left: 50px;margin-top: 20px">
                            <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">

                                <el-form-item label="姓名" prop="patientName">
                                    <el-input v-model="ruleForm.patientName"></el-input>
                                </el-form-item>

                                <el-form-item label="身份证ID" prop="patientIdCard">
                                    <el-input v-model="ruleForm.patientIdCard"></el-input>
                                </el-form-item>

                                <el-form-item label="科室" prop="administrative">
                                    <el-select v-model="ruleForm.administrativeId" @change="doctorSearch(ruleForm.administrativeId)" placeholder="请选择科室">
                                        <el-option
                                                v-for="item in administrative"
                                                :key="item.administrativeId"
                                                :label="item.administrativeName"
                                                :value="item.administrativeId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>


                                <el-form-item label="医师" prop="doctor">
                                    <el-select v-model="ruleForm.doctorId" @change="dutySearch(ruleForm.doctorId)" placeholder="请选择医师">
                                        <el-option
                                                v-for="item in doctor"
                                                :key="item.doctorId"
                                                :label="item.doctorName+item.doctorDuty"
                                                :value="item.doctorId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="挂号时间" prop="doctor">
                                    <el-select v-model="ruleForm.dutyId" placeholder="请选择挂号时间">
                                        <el-option
                                                v-for="item in duty"
                                                :key="item.dutyId"
                                                :label="item.dutyDate"
                                                :value="item.dutyId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="价格" prop="doctorRegisterCharge">
                                    <i class="el-icon-coin"></i>
                                    <span>
                                        ￥{{ruleForm.doctorRegisterCharge}}
                                    </span>
                                </el-form-item>


                                <el-form-item>
                                    <el-button type="primary" @click="submitForm">立即挂号</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>

                            </el-form>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="挂号查询">
                        <div style="width:1500px;margin-top: 20px">
                            <el-table
                                    :data="registerTable"
                                    style="width: 100%">
                                <el-table-column
                                        label=""
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <div >
                                            {{scope.row.patientName}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label=""
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <div >
                                            {{scope.row.administrativeName}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label=""
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <div >
                                            {{scope.row.doctorName}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label=""
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <div >
                                            {{scope.row.doctorDuty}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label=""
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <div >
                                            {{scope.row.money}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label=""
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <div >
                                            {{scope.row.status}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label=""
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <div >
                                            {{scope.row.bookTime}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="身份证查询"
                                        align="center"
                                >
                                    <template slot-scope="scope">
                                        <div >
                                            {{scope.row.isValid}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                >
                                    <template slot="header" slot-scope="scope" >
                                        <el-input
                                                @keyup.enter.native="searchIdCard"
                                                v-model="search"
                                                size="mini"
                                                placeholder="请输入身份证号"/>
                                    </template>
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.$index, scope.row)">修改科室</el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                style="margin-top: 10px"
                                                @click="handleDelete(scope.$index, scope.row)">取消挂号</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="急诊挂号">急诊挂号</el-tab-pane>
                    <el-tab-pane label="值班查询">医师值班</el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>

<style>
    el-submenu
    .el-submenu__icon-arrow {
        right: 220px;
        margin-top: -5px;
    }
    .el-icon-arrow-down {
        right: 220px;
        margin-top: -5px;
    }



</style>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            uniqueOpened: true,
            ruleForm: {
                patientName: '',
                patientIdCard:'',
                administrativeId:'',
                doctorId:'',
                dutyId:'',
                doctorRegisterCharge:''
            },
            administrative:[{
                administrativeId:'',
                administrativeName:''
            }],
            doctor:[{
                doctorId:'',
                doctorName:'',
                doctorDuty:'',
                doctorRegisterCharge:''

            }],
            duty:[{
                dutyId:'',
                dutyDate:''
            }],
            registerTable: [],
            search: '',
            registrationManagement:false

        },
        methods:{
            //挂号管理显示
            registrationShow:function(){
                this.registrationManagement=true;
            },
            //根据传入的科室ID查询医师名单
            doctorSearch:function(relDoctor){
                axios.get("/medical/doctor/selectDoctorList",{
                    params: {
                        "administrativeId": relDoctor
                    }
                }).then(resp=>{
                    this.doctor=resp.data.data;
                })
            },
            //根据传入的医师ID查询医师排班名单
            dutySearch:function(relDuty){
                for(var i=0;i<this.doctor.length;i++){
                    if(this.doctor[i].doctorId==relDuty){
                        this.ruleForm.doctorRegisterCharge=this.doctor[i].doctorRegisterCharge;
                        break;
                    }
                }
                axios.get("/medical/duty/selectDutyList",{
                    params: {
                        "doctorId": relDuty
                    }
                }).then(resp=>{
                    this.duty=resp.data.data;
                })
            },
            //根据身份证查询病人挂号信息
            searchIdCard:function () {
                var vm=this;
                axios.get("/medical/register/selectRegisterList",{
                    params:{
                        "patientIdCard":this.search
                    }
                }).then(resp=>{
                    console.log(resp.data.data);
                    vm.registerTable=resp.data.data;
                })
            },
            //提交表单
            submitForm() {
                axios.post("/medical/register/insertWindowRegister",this.ruleForm).then(resp=>{
                    alert(resp.data.data);
                });
            },
            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        //计算属性
        computed:{

        },
        //钩子函数
        mounted:function () {
            axios.get("/medical/administrative/list").then(resp=>{
                this.administrative=resp.data.data;
            })
        }
    });
</script>
</body>
</html>
